<html>
	<head>
		<style>
		/* #box1{
		    width:200px;
		    height:100px;
		    background:blue;
		    float:right;
		}
		#box2{
		    width:200px;
		    height:100px;
		    background:red;
		}
		#box3{
		    width:200px;
		    height:100px;
		    background:green;
		} 
		#box1{
		    width:200px;
		    height:100px;
		    background:blue;
		    float:left;
		}
		#box2{
		    width:300px;
		    height:100px;
		    background:red;
		}
		#box3{
		    width:200px;
		    height:100px;
		    background:green;
		}*/
		#box1{
		    width:200px;
		    height:100px;
		    background:blue;
		    float:left;
		}
		#box2{
		    width:200px;
		    height:100px;
		    background:red;
		    float:left;
		}
		#box3{
		    width:200px;
		    height:100px;
		    background:green;
		    float:left;
		} 
		</style>
	</head>
	<body>
		<p>由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。</p>
		<p>如果把 box1 向左浮动，他会脱离文档流并且向左移动，直到他的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上会覆盖掉 box2，使 box2 从视图中消失。为了达到演示效果，可以稍微修改下3个 div 元素的的样式</p>
		<p>如果把所有3个 box 都向左浮动，那么 box1 向左浮动直到碰到包含框，另外两个 box 向左浮动直到碰到前一个浮动框</p>
		<div id="box1">1
		</div>
		<div id="box2">2
		</div>
		<div id="box3">3
		</div>
	</body>
</html>